<template>
  <div>
    <h2>作用域插槽</h2>
    <my-user>
      <!-- 父组件，定义一个变量名来接受刚才 绑定的变量，slotProps是一个对象
       -->
       <!-- 给v-slot:插槽名="喜欢的变量名" ，从这个对象取刚才插槽上传过来的数据 -->
      <template v-slot:default="{ user, age }">
        <!-- <p>{{ obj }}</p> -->
        <!-- {{ user.firstName }} -->
        <p>{{ user.firstName }}</p>
        <p>{{ age }}</p>
      </template>

      <!-- <template v-slot:footer="{ msg }">
         <p>{{ msg }}</p>
      </template> -->

      <template #footer="{ msg }">
         <p>{{ msg }}</p>
      </template>
    </my-user>
  </div>
</template>

<script>

import MyUser from './components/03 作用域插槽.vue';
export default {
  components:{
    MyUser
  }
}
</script>

<style>

</style>